<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<style>
			/* 盒子模型4个元素:content内容,padding内边距,margin外边距 */
			 .box{
				width:300px;/* 宽 */
				height:200px;/* 高 */
				/* border-width:1px;  边框宽度 */
				/* border-color:red;边框颜色 */
				/* 边框样式border-style:solid实践  dotted   dashed */
				/* border-styla:solid */
				/* 边框的复合写法: */
				border:solid 1px rgb(168,62,177);
				border-bottom:10px dotted red; 
				border-top:10px dashed green;
				border-left:5px solid pink;
				border-right:5px solid gold;
				/* 方位词:top上,bottom下,left左,right右,center中间*/
				/* padding-top:50px;
				padding-left:30px; */
				/* 复合写法;: */
				/* padding:10px;   四个方位的内边距都是10px; */
				/* padding:10px 30px   第一个值指上下,第二个值指左右 */
				/* padding:10px 20px 30px 第一个上,第二个左右,第三个下 */
				/* padding:10px 20px 30px 40px 上 右 下 左(顺时针) */
			 }
		</style>
	</head>
	<body>
		<div class="box">hello box</div>
	</body>
</html>
